<template>
    <div class="board" v-if="game && board">
        <div class="desk">
            <div class="tips" v-if="board.use && board.use.card && board.use.card.desc">
                <div class="desc">
                    <span v-for="(content, i) in board.use.card.desc" :key="'desc_' + i" :class="descContentType(content)">{{descContent(content)}}</span>
                </div>
                <div class="tip" v-for="(desc, i) in otherDesc(board.use.card.desc)" :key="'tip' + i">
                    <span v-for="(content, j) in desc" :key="'stip_' + i" :class="descContentType(content)">{{descContent(content)}}</span>
                </div>
            </div>
            <div class="tips" v-else-if="select && select.desc">
                <div class="desc">
                    <span v-for="(content, i) in select.desc" :key="'desc_' + i" :class="descContentType(content)">{{descContent(content)}}</span>
                </div>
                <div class="tip" v-for="(desc, i) in otherDesc(select.desc)" :key="'tip' + i">
                    <span v-for="(content, j) in desc" :key="'stip_' + i" :class="descContentType(content)">{{descContent(content)}}</span>
                </div>
            </div>
            <div class="tips" v-else-if="tips" @mousedown="toggleTips" @touchstart="toggleTips">
                <div class="tip" v-for="(desc, i) in allDesc" :key="'tip' + i">
                    <span v-for="(content, j) in desc" :key="'stip_' + i" :class="descContentType(content)">{{descContent(content)}}</span>
                </div>
            </div>
            <div class="inset">
                <div class="home target">
                    <template v-if="targetHome">
                        <div class="main"></div>
                        <soldier v-for="soldier in targetTroops" :key="'target.soldier.' + soldier.index" :soldier="soldier" class="soldier" direction="target" :style="{ transform: 'translate(' + translate(soldier.index, Math.cos) * 25 + 'vw, ' + translate(soldier.index, Math.sin) * 10 + 'vh)', zIndex: Math.round(translate(soldier.index, Math.sin) * 500) + 500 }" />
                        <div class="value">{{targetHome.value}}</div>
                        <reinforce class="reinforce" v-for="(reinforce, i) in targetReinforces" :key="'target.reinforce.' + reinforce.time" :reinforce="reinforce" :style="{ transform: 'translate(' + (reinforce.distance * 10 + 5 + (i / targetReinforces.length) * 5) + 'vw, ' + (i / targetReinforces.length * 5 - 2.5) * reinforce.distance + 'vh)' }" />
                    </template>
                </div>
                <div class="river">
                    
                </div>
                <div class="home own">
                    <template v-if="ownHome">
                        <soldier v-for="soldier in ownTroops" :key="'own.soldier.' + soldier.index" :soldier="soldier" class="soldier" direction="own" :style="{ transform: 'translate(' + -translate(soldier.index, Math.cos) * 25 + 'vw, ' + -translate(soldier.index, Math.sin) * 10 + 'vh)', zIndex: Math.round(-translate(soldier.index, Math.sin) * 500) + 500 }" />
                        <div class="main"></div>
                        <div class="value">{{ownHome.value}}</div>
                        <reinforce class="reinforce" v-for="(reinforce, i) in ownReinforces" :key="'own.reinforce.' + reinforce.time" :reinforce="reinforce" :style="{ transform: 'translate(' + (reinforce.distance * 10 + 5 + (i / ownReinforces.length) * 5) + 'vw, ' + (i / ownReinforces.length * 5 - 2.5) * reinforce.distance + 'vh)' }" />
                    </template>
                </div>
            </div>
        </div>
        <div class="history" :class="history ? 'show' : ''">
            <div class="mask" @touchstart="toggleHistory" @mousedown="toggleHistory"></div>
            <div class="title" @touchstart="toggleHistory" @mousedown="toggleHistory">对战历史<i class="fa fa-fw fa-close" /></div>
            <div class="steps scrollable">
                <div class="step" v-for="step in board.history">
                    <span class="role" :class="step.role.color">{{step.role.player.name}}</span>
                    <span>：</span>
                    <cardname :card="step.card" />
                </div>
            </div>
        </div>
        <div class="choose" v-if="board.stage === gameConfig.stages.choose">
            <div v-if="role.occupation" class="wait">等待其他玩家选择({{board.tick}})</div>
            <div v-if="!role.occupation" class="scrollable options">
                <div class="title">请选择职业</div>
                <div v-for="o in board.occupations" class="occupation" :class="o === choose ? 'selected' : ''" @mousedown="chooseOccupation(o)" @touchstart="chooseOccupation(o)">
                    <div class="type" :class="o.type"></div>
                    <div class="content">
                        <div class="name">{{o.name}}</div>
                        <div class="desc">{{o.desc}}</div>
                    </div>
                </div>
            </div>
            <div v-if="!role.occupation" class="buttons">
                <div class="btn play" :class="choose ? '' : 'disabled'" @touchstart="doChoose" @mousedown="doChoose">选择({{board.tick}})</div>
            </div>
        </div>
        <div class="first" v-if="board.stage === gameConfig.stages.first && role.idx">
            <div class="text">猜先</div>
            <card :card="role.idx" animation="first" />
        </div>
        <div class="use" v-if="board.use && board.use.card">
            <card :card="board.use.card" animation="use" />
        </div>
        <div class="latest" v-if="board.latest && board.latest.result">
            <div class="lcards" v-if="board.latest.result.cards && board.latest.result.cards.length">
                <card v-for="card in board.latest.result.cards" :card="card" animation="remove" />
            </div>
        </div>
        <div class="round" v-if="board.stage === gameConfig.stages.deal || board.stage === gameConfig.stages.reissue">
            <div class="text">Round {{board.round}}</div>
        </div>
        <div class="clear" v-if="board.stage === gameConfig.stages.clear">
            <div class="text">清除状态</div>
        </div>
        <div class="random" v-if="board.stage === gameConfig.stages.random">
            <div class="text">开始猜拳</div>
        </div>
        <div class="settle" v-if="board.stage === gameConfig.stages.settle">
            <div class="text">开始结算</div>
        </div>
        <div class="select scrollable" v-if="use && use.option.target === gameConfig.targets.home">
            <div class="option" @touchstart="selectOpion(gameConfig.targets.ownHome)" @mousedown="selectOpion(gameConfig.targets.ownHome)">
                <card :back="option === gameConfig.targets.ownHome ? ownHome.color : true" />
                <div>己方堡垒</div>
            </div>
            <div class="option" @touchstart="selectOpion(gameConfig.targets.targetHome)" @mousedown="selectOpion(gameConfig.targets.targetHome)">
                <card :back="option === gameConfig.targets.targetHome ? targetHome.color : true" />
                <div>敌方堡垒</div>
            </div>
            <div class="buttons">
                <div class="btn play" :class="option ? '' : 'disabled'" @touchstart="doPlayCard" @mousedown="doPlayCard">出牌</div>
                <div class="btn cancel" @touchstart="doCancel" @mousedown="doCancel">取消({{board.tick}})</div>
            </div>
        </div>
        <div class="replace" v-if="board.stage === gameConfig.stages.replace">
            <div v-if="role.replace >= gameConfig.card.replaceCount" class="text">等待其他玩家换牌({{board.tick}})</div>
            <div v-else class="buttons">
                <div class="btn play" :class="select ? '' : 'disabled'" @touchstart="doReplace" @mousedown="doReplace">换牌({{gameConfig.card.replaceCount - role.replace}})</div>
                <div class="btn cancel" @touchstart="doCancel" @mousedown="doCancel">结束({{board.tick}})</div>
            </div>
        </div>
        <div class="status target">
            <div class="type" v-if="targetReinforcesCount" @mousedown="toggleTips" @touchstart="toggleTips">{{gameConfig.status.reinforce}}：{{targetReinforcesCount}}</div>
            <div v-for="status in targetStatuses" class="type" @mousedown="toggleTips" @touchstart="toggleTips">{{gameConfig.status[status.type]}}：{{status.count}}</div>
            <div class="win">
                <div class="color" :class="targetHome.color"></div>
                <div v-for="i in Math.ceil(room.settings.round / 2)" :class="[targetHome && i <= targetHome.winCount ? 'score' : 'unscore', targetHome.color]" :key="i"></div>
            </div>
        </div>
        <div class="status own">
            <div class="type" v-if="ownReinforcesCount" @mousedown="toggleTips" @touchstart="toggleTips">{{gameConfig.status.reinforce}}：{{ownReinforcesCount}}</div>
            <div v-for="status in ownStatuses" class="type" @mousedown="toggleTips" @touchstart="toggleTips">{{gameConfig.status[status.type]}}：{{status.count}}</div>
            <div class="win">
                <div class="color" :class="ownHome.color"></div>
                <div v-for="i in Math.ceil(room.settings.round / 2)" :class="[ownHome && i <= ownHome.winCount ? 'score' : 'unscore', ownHome.color]" :key="i"></div>
            </div>
        </div>
        <div class="help toggle" @mousedown="toggleTips" @touchstart="toggleTips"><i class="fa fa-fw fa-question" /></div>
        <div class="hist toggle" @mousedown="toggleHistory" @touchstart="toggleHistory"><i class="fa fa-fw fa-navicon" /></div>
        <div class="turn" v-if="board.role && board.role.player">
            <div class="role" v-if="board.roles[(board.turn + board.roles.length - 1) % board.roles.length].status !== 'none'"><span v-if="board.roles[(board.turn + board.roles.length - 1) % board.roles.length].status === 'pass'" class="tag">pass</span>{{ board.roles[(board.turn + board.roles.length - 1) % board.roles.length].player.name }}</div>
            <div class="current">
                <div class="name">{{ board.role.player.name }}</div>
                <div class="cards">
                    <card v-for="i in board.role.cardCount" :back="true" :key="'current.' + i" />
                </div>
                <div class="counts">
                    <i class="fa fa-fw fa-book" />
                    <div class="count">{{board.role.heapCount}}</div>
                    <i class="fa fa-fw fa-recycle" />
                    <div class="count">{{board.role.pileCount}}</div>
                </div>
            </div>
            <div class="role">{{ board.roles[(board.turn + 1) % board.roles.length].player.name }}</div>
        </div>
        <div class="handle">
            <div class="cards" :class="role && role.status === 'play' ? '' : 'hide'">
                <card v-for="(card, i) in cards" :key="'card.' + i" :card="card" animation="add" :style="{ 
                    marginLeft: cardMargin(cards.length) + 'rem',
                    marginRight: cardMargin(cards.length) + 'rem',
                    transform: transform(i, card, cards.length)
                }" @select="selectCard(i, card)" />
            </div>
        </div>
        <div class="buttons" v-if="role && role.status === 'play'">
            <div class="btn play" :class="select ? '' : 'disabled'" @touchstart="doPlayCard" @mousedown="doPlayCard">出牌</div>
            <div class="btn pass" @touchstart="doPass" @mousedown="doPass">PASS({{board.tick}})</div>
        </div>
    </div>
</template>
<script>
    import { mixin, utils, Vue } from 'board-game/client';
    import card from './card.vue';
    import cardname from './cardname.vue';
    import soldier from './soldier.vue';
    import reinforce from './reinforce.vue';

    import config, { game } from '../config';


    export default {
        name: "game",
        mixins: [ mixin ],
        components: {
            card,
            cardname,
            soldier,
            reinforce
        },
        watch: {
            'role.status'() {
                if (this.role.status !== 'play') {
                    this.use = false;
                    this.option = false;
                }
            }
        },
        computed: {
            cards() {
                return utils.asArray(this.role && this.role.cards || {});
            },
            ownHome() {
                return this.group && this.board && this.board.homes && this.board.homes.find(home => home.index === this.group.index);
            },
            ownTroops() {
                return this.ownHome && utils.asArray(this.ownHome.troops);
            },
            ownReinforces() {
                return this.ownHome && utils.asArray(this.ownHome.reinforces) || [];
            },
            ownReinforcesCount() {
                return this.ownReinforces && this.ownReinforces.reduce((sum, reinforce) => sum + reinforce.value, 0) || 0;
            },
            targetHome() {
                return this.group && this.board && this.board.homes && this.board.homes.find(home => home.index !== this.group.index);
            },
            targetTroops() {
                return this.targetHome && utils.asArray(this.targetHome.troops);
            },
            targetReinforces() {
                return this.targetHome && utils.asArray(this.targetHome.reinforces) || [];
            },
            targetReinforcesCount() {
                return this.targetReinforces && this.targetReinforces.reduce((sum, reinforce) => sum + reinforce.value, 0) || 0;
            },
            ownHomeCard() {
                return this.ownHome ? {
                    option: {
                        number: '',
                        color: this.ownHome.color,
                        suit: '',
                        value: '',
                    }
                } : {}
            },
            ownStatuses() {
                if (this.ownTroops) {
                    let result = {};
                    for (let soldier of this.ownTroops) {
                        if (soldier.buff) {
                            result[soldier.buff] = (result[soldier.buff] || 0) + 1;
                        } else {
                            result['normal'] = (result['normal'] || 0) + 1;
                        }
                        // result['total'] = (result['total'] || 0) + 1;
                    }
                    return Object.keys(result).map(key => ({type: key, count: result[key]}));
                } else {
                    return {};
                }
            },
            targetStatuses() {
                if (this.targetTroops) {
                    let result = {};
                    for (let soldier of this.targetTroops) {
                        if (soldier.buff) {
                            result[soldier.buff] = (result[soldier.buff] || 0) + 1;
                        } else {
                            result['normal'] = (result['normal'] || 0) + 1;
                        }
                        // result['total'] = (result['total'] || 0) + 1;
                    }
                    return Object.keys(result).map(key => ({type: key, count: result[key]}));
                } else {
                    return {};
                }
            },
            allDesc() {
                return this.otherDesc(Object.keys(config.game.desc));
            }
        },
        data() {
            return {
                select: false,
                use: false,
                option: false,
                tips: false,
                choose: false,
                history: false,
                gameConfig: config.game,
            }
        },
        mounted() {
            window.game = this;
        },
        destroyed() {
            clearInterval(this.timer);
        },
        methods: {
            chooseOccupation(occupation) {
                this.choose = occupation;
            },
            doChoose() {
                this.$root.emit.doChoose(this.choose);
            },
            toggleTips() {
                this.tips = !this.tips;
            },
            toggleHistory() {
                this.history = !this.history;
            },
            descContentType(content) {
                if (content.charAt(0) === '[' && content.charAt(content.length - 1) === ']') {
                    return 'name';
                } else if (content.charAt(0) === '{' && content.charAt(content.length - 1) === '}') {
                    return 'value';
                } else if (content.charAt(0) === '(' && content.charAt(content.length - 1) === ')') {
                    return 'time';
                } else if (content.charAt(0) === '<' && content.charAt(content.length - 1) === '>') {
                    return 'action';
                } else {
                    return '';
                }
            },
            descContent(content) {
                if (content.charAt(0) === '[' && content.charAt(content.length - 1) === ']') {
                    return content.substring(1, content.length - 1);
                } else if (content.charAt(0) === '{' && content.charAt(content.length - 1) === '}') {
                    return content.substring(1, content.length - 1);
                } else if (content.charAt(0) === '(' && content.charAt(content.length - 1) === ')') {
                    return content.substring(1, content.length - 1);
                } else if (content.charAt(0) === '<' && content.charAt(content.length - 1) === '>') {
                    return content.substring(1, content.length - 1);
                } else {
                    return content;
                }
            },
            otherDesc(desc) {
                let otherDesc = [];
                for (let content of desc) {
                    if (content in config.game.desc && !otherDesc.includes(content)) {
                        otherDesc.push(content);
                    }
                }
                let append = [];
                do {
                    append = [];
                    for (let content of otherDesc) {
                        for (let subContent of config.game.desc[content]) {
                            if (subContent in config.game.desc && !otherDesc.includes(subContent) && !append.includes(subContent)) {
                                append.push(subContent);
                            }
                        }
                    }
                    otherDesc.push(...append);
                } while(append.length);
                return otherDesc.map(content => ([content, '：', ...config.game.desc[content]]));
            },

            translate(i, fun) {
                const rand = [0, 1, 2, 4, -1, 1, -2, -6];
                const base = 6, rc = Math.PI * 2, max = 5;
                let x = i + rand[i % 7];
                let dis = (Math.sqrt(1 + 8 * ((x + base) / rc)) - 1) / 2;
                let deg = dis * rc;
                return fun(deg) * (dis * max) / (dis + max * max);
            },

            cardMargin(cardSize) {
                return -Math.atan(cardSize - 1) / Math.PI * 5;
            },
            transform(i, card, cardSize) {
                return 'rotate(' + (i - (cardSize - 1) / 2) / cardSize * 30 + 'deg) ' +
                    'translateY(' + (i - (cardSize - 1) / 2) / cardSize * (i - (cardSize - 1) / 2) / cardSize * 4 + 'rem) '+
                    (card.touching ? 'translateY(-2rem) ' : '') +
                    '';
            },
            selectCard(i, card) {
                this.tips = false;
                if (this.select) {
                    this.select.touching = false;
                    let index = this.cards.indexOf(this.select);
                    if (index !== -1) {
                        Vue.set(this.cards, index, this.select);
                    }
                }
                if (this.select !== card) {
                    card.touching = true;
                    Vue.set(this.cards, i, card);
                    this.select = card;
                } else {
                    this.select = false;
                }
            },
            doReplace() {
                if (this.select) {
                    let index = this.cards.indexOf(this.select);
                    if (index !== -1) {
                        this.select.touching = false;
                        Vue.set(this.cards, index, this.select);
                        this.select = false;
                        this.$root.emit.doReplace({ cardIndex: index });
                    }
                }
            },
            doPlayCard() {
                if (!this.select && this.use) {
                    this.select = this.use;
                    this.use = false;
                }
                if (this.select) {
                    let index = this.cards.indexOf(this.select);
                    if (index !== -1) {
                        if (this.select.option.target === this.gameConfig.targets.home) {
                            if (this.option) {
                                this.doUseCard(this.select, [{ type: this.option }]);
                            } else {
                                this.showSelect();
                            }
                        } else if (this.select.option.target === this.gameConfig.targets.ownRoles) {
                            //显示选择己方角色页面
                            this.showSelect();
                        } else if (this.select.option.target === this.gameConfig.targets.targetRoles) {
                            //显示选择地方角色页面
                            this.showSelect();
                        } else {
                            this.doUseCard(this.select, [{ type: this.select.option.target }]);
                        }
                    }
                }
            },
            doUseCard(card, targets) {
                let index = this.cards.indexOf(card);
                if (index !== -1) {
                    card.touching = false;
                    Vue.set(this.cards, index, card);
                    this.select = false;
                    this.option = false;
                    this.use = false;
                    this.$root.emit.doPlayCard({ cardIndex: index, targets });
                }
            },
            showSelect() {
                this.option = false;
                this.use = this.select;
                this.select = false;
            },
            selectOpion(option) {
                this.option = option;
            },
            doCancel() {
                if (this.board.stage === config.game.stages.replace) {
                    this.$root.emit.doCancelReplace();
                } else {
                    this.select = this.use;
                    this.option = false;
                    this.use = false;
                }
            },
            doPass() {
                this.$root.emit.doPass();
            }
        }
    }
</script>
<style lang="less" scoped>
    .board {
        width: 100%;
        height: 100%;
        background-color: #999933;
        .desk {
            padding: 4rem 3rem;
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            .tips {
                flex: none;
                position: absolute;
                max-width: 60vw;
                top: 5rem;
                padding: 2rem;
                background-color: #333333F0;
                border: 1px solid #333333;
                border-radius: 0.25rem;
                color: white;
                // text-shadow: white 0 0 0.1em;
                z-index: 9999;
                font-weight: bold;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                text-align: left;

                .desc {
                    font-size: 1rem;
                    margin-bottom: 1rem;
                }
                .tip {
                    font-size: 0.6rem;
                }
                .name {
                    color: #AAAAAA;
                }
                .time {
                    color: #AAFFAA;
                }
                .value {
                    color: #FFAAAA;
                }
                .action {
                    color: #AAAAFF;
                }
            }
            .inset {
                width: 100%;
                height: 100%;
                box-shadow: inset 0rem 0.5rem 1rem #666600;
                border-radius: 4rem;
                background-color: #99FF99;
                display: flex;
                flex-direction: column;
                .home {
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    .reinforce {
                        transition: all linear 2s;
                    }
                    &.target {
                        .value {
                            transform: translateY(-4rem);
                        }
                        .main {
                            margin-top: -2rem;
                            z-index: 500;
                        }
                    }
                    &.own {
                        .main {
                            margin-top: -2rem;
                            z-index: 500;
                        }
                        .value {
                            transform: translateY(-4rem);
                        }
                    }
                    .value {
                        position: absolute;
                        font-size: 1.2rem;
                        color: #cccccc;
                        text-shadow: #000000 0 0 0.25rem;
                    }
                    .main {
                        position: absolute;
                        width: 4rem;
                        height: 4rem;
                        background-image: url("./images/tower.png");
                        background-size: cover;
                    }
                }
                .river {
                    flex: none;
                    margin-left: -2rem;
                    margin-right: -2rem;
                    height: 2rem;
                    background-color: #6666FF;
                    box-shadow: inset 0rem 0.2rem 0.5rem #99FF99;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }

        .history {
            position: absolute;
            z-index: 12000;
            top: 0;
            left: 100vw;
            width: 50%;
            height: 100%;
            background-color: #ffffaa;
            display: flex;
            flex-direction: column;
            transition: all ease-out 0.6s;
            &.show {
                left: 50vw;
                .mask {
                    left: -100vw;
                }
            }
            .mask {
                position: absolute;
                z-index: 11000;
                top: 0;
                width: 100vw;
                height: 100%;
                background-color: #00000033;
            }
            .title {
                flex: none;
                height: 1rem;
                width: 100%;
                text-align: center;
            }
            .steps {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                padding: 1rem;
                .step {
                    width: 100%;
                    text-align: left;
                    .role {
                        &.red {
                            color: #ff0000;
                        }
                        &.blue {
                            color: #0000ff;
                        }
                    }
                }
            }
        }

        .choose {
            position: absolute;
            z-index: 8000;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000000E0;
            .wait {
                font-size: 2.5rem;
                color: #ffffff;
            }
            .buttons {
                position: absolute;
                bottom: 0;
                right: 0;
            }
            .options {
                position: absolute;
                top: 0;
                bottom: 4rem;
                width: 100%;
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                .title {
                    font-size: 2rem;
                    color: #FFFFFF;
                }
                .occupation {
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    padding: 1rem;
                    border: 2px solid transparent;
                    &.selected {
                        border: 2px solid #ffffff;
                    }
                    .type {
                        flex: none;
                        width: 6rem;
                        height: 9rem;
                        background-size: cover;
                        border-radius: 1rem;
                        border: 2px solid #ffffff;
                    }
                    .content {
                        text-align: left;
                        color: #FFFFFF;
                        display: flex;
                        flex-direction: column;
                        margin-left: 1rem;
                        .name {
                            font-size: 1.5rem;
                        }
                        .desc {
                            word-break: break-all;
                        }
                    }
                }
            }
        }

        .first, .use, .latest, .round, .random, .clear, .settle, .replace {
            position: absolute;
            z-index: 2500;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .text {
                font-weight: 1000;
                font-size: 5rem;
                color: #006600;
            }
        }

        .latest {
            .lcards {
                display: flex;
                flex-direction: row;
                > * {
                    margin-left: -3rem;
                }
            }
        }

        .replace {
            .text {
                font-size: 2rem;
            }
            .buttons {
                position: absolute;
                bottom: 0;
                right: 0;
                z-index: 10000;
            }
        }
        
        .first {
            .text {
                font-size: 2rem;
            }
        }
        .round {
            .text {
                text-shadow: #000066 0.5rem 0.5rem 0;
            }
        }

        .win {
            height: 1rem;
            padding: 0.5rem;
            border-radius: 1rem;
            background-color: #FFFF99;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            > div {
                width: 0.5rem;
                height: 0.5rem;
                border-radius: 0.25rem;
                margin-left: 0.5rem;
                &:first-child {
                    margin-left: 0;
                }
            }
            .color {
                width: 2rem;
                &.red {
                    background-color: #FF0000;
                }
                &.blue {
                    background-color: #0000FF;
                }
            }
            .score {
                &.red {
                    background-color: #FF0000;
                }
                &.blue {
                    background-color: #0000FF;
                }
            }
            .unscore {
                background-color: #a0a066;
            }
        }

        .toggle {
            position: absolute;
            z-index: 15000;
            width: 1rem;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            top: 0;
            font-size: 0.8rem;
            border-radius: 50%;
            background-color: #6666FF;
            color: #ffffff;
            &.help {
                right: 0;
            }
            &.hist {
                right: 1.5rem;
            }
        }

        .turn {
            position: absolute;
            width: 25%;
            top: 1rem;
            right: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            z-index: 5000;
            .role {
                text-shadow: #000000 0 0 0.2rem;
                background-color: #00000030;
                border-radius: 0.5rem;
                margin-top: 0.2rem;
                margin-right: -0.5rem;
                padding: 0 0.5rem;
                display: flex;
                flex-direction: row;
                align-items: center;
                .tag {
                    border-radius: 0.5rem;
                    padding: 0 0.25rem;
                    height: 0.8rem;
                    line-height: 0.8rem;
                    margin-right: 0.2rem;
                    font-size: 0.5rem;
                    border: 1px solid #000000;
                    background-color: #9999FF;
                    text-shadow: none;
                }
            }
            .current {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                padding: 0 0.5rem;
                background-color: #00000030;
                border-radius: 0.5rem;
                margin-top: 0.2rem;
                .cards {
                    display: flex;
                    flex-direction: row;
                    margin-right: 4rem;
                    margin-left: -1.5rem;
                    .card {
                        margin-top: -7rem;
                        margin-right: -5.8rem;
                        transform: scale(0.2);
                    }
                }
                .name {
                    font-size: 1.5rem;
                }
                .counts {
                    color: #003300;
                    font-size: 0.6rem;
                    line-height: 1.2rem;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                }
            }
        }

        .select {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 10000;
            top: 0;
            left: 0;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-around;
            align-items: center;
            background-color: #00000080;
            .option {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            .buttons {
                position: absolute;
                right: 0;
                bottom: 0;
            }
        }
        
        .status {
            position: absolute;
            width: 25%;
            left: 0.5rem;
            display: flex;
            justify-content: flex-end;
            align-items: flex-start;
            &.own {
                flex-direction: column;
                bottom: 0.5rem;
                .type {
                    margin-bottom: 0.2rem;
                }
            }
            &.target {
                flex-direction: column-reverse;
                top: 0.5rem;
                .type {
                    margin-top: 0.2rem;
                }
            }
            .type {
                font-size: 0.8rem;
                color: #ffffff;
            }
        }
        .cards {
            position: absolute;
            width: 50%;
            bottom: 0;
            left: 25%;
            z-index: 5000;
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-bottom: -2rem;
            transition: all linear 0.2s;
            &.hide {
                margin-bottom: -5rem;
            }
        }
        .buttons {
            position: absolute;
            width: 25%;
            bottom: 0;
            right: 0;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
            padding: 0.5rem;
            .btn {
                width: 8rem;
                padding: 0.5rem;
                color: #ffffff;
                border: 2px solid #ffffff;
                background-color: #000099;
                border-radius: 0.5rem;
                margin-top: 0.5rem;
                &.disabled {
                    background-color: #333333;
                }
            }
        }
    }
    
</style>